<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #user-img{
            width:140px;
            height: 140px;
            border-radius: 100px;
        }
        .float-right{
            display: inline-block;
            margin-left: 30px;
        }
        #user-phone,#user-name{
            margin-bottom: 30px;
        }
        .addr-content{
            display: inline-block;
            width:500px;
        }
        .inline-block{
             display: inline-block;
            width:60px;
            margin:0px;
        }
        radio .inline-block{
            width:10px;
        }
        .clear{
            clear:both;
        }
        #phone-img{
            width: 50px;
            height: 50px;
        }
        #back-btn{
            display: block;
            font-size: 1.3em;
            margin: 10px 0;

        }
        #back-img{
            width: 25px;
            height: 30px;
        }

         body{
             /*background-image:url(/src/image/bg-3.jpg);*/
         }
        .user-icon{
            width: 20px;
            height: 20px;
        }

    </style>
    <navbar></navbar>
</head>
<body>
<a id="back-btn" onClick="javascript:history.back(1)" style="margin-top: 90px">返回</a>
<div class="container" ng-controller="infoController as vm" style="margin-top: 80px">
    <!-- Main component for a primary marketing message or call to action -->

    <div class="jumbotron" style="border-radius: 8px;">

    <div class="tab-content" >
        <div>
            <img id="user-img" src="{{vm.customer.headPic}}">
            <div class="float-right">
                <div style="margin-left: 11px;">

                    <!--<span class="glyphicon glyphicon-user" aria-hidden="true"></span>-->
                    <img class="user-icon" src="/src/image/user.png">

                    <span style="margin-left: 17px; font-size:30px">{{vm.customer.nickName}}</span>
                </div>
                <div id="user-phone"><img id="phone-img" src="/src/image/phone2.png"><span style="font-size:30px;">{{vm.customer.phone}}</span></div>
            </div>

        </div>

    </div>

   </div>
    <div class="jumbotron" style="border-radius: 8px;">
        <p>我的地址</p>


        <div class="tab-content clear">

            <div id="all-address">

                <div class="list-group">
                    <a class="list-group-item"  ng-repeat="addr in vm.addresses track by $index">

                        <p class="list-group-item-heading">
                            <h4>{{addr.content}}</h4>
                        </p>

                        <p class="list-group-item-text">
                            <div style="text-align:right;">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-danger" ng-click="vm.deleteAddress($index)">删除</button>
                                <button type="button" class="btn btn-default" ng-click="vm.showModalModifyAddress($index)">修改</button>
                                <button type="button" class="btn btn-default" ng-if="!addr.status" ng-click="vm.setDefaultAddress($index)">选为默认地址</button>
                                <button type="button" class="btn btn-success" ng-if="addr.status">默认地址</button>
                            </div>
                            </div>
                        </p>

                    </a>

                    <a ng-click="vm.showModalNewAddress()" class="list-group-item btn-add-addr" style="background-color:orange;">
                        <h4 class="list-group-item-heading addr-text">添加收货地址</h4>
                    </a>

                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="add-address-model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">新增收货地址</h4>
                    </div>
                    <div>

                        <input type="text" class="form-control" id="input-add-address" placeholder="新增收货地址（最多100字）" maxlength="100" ng-model="vm.addingAddress">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="btn-add-address" type="button" class="btn btn-primary" ng-click="vm.addAddress()">添加</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="update-address-model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">修改收货地址</h4>
                    </div>
                    <div>
                        <input type="hidden" id="input-update-address-id" >
                        <input type="text" class="form-control" id="input-update-address" placeholder="修改收货地址（最多100字）" maxlength="100" ng-model="vm.selectedAddress.content">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.resetAddress()">取消</button>
                        <button id="btn-update-address" type="button" class="btn btn-primary" ng-click="vm.updateAddress()">修改</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</body>
</html>